<template>
  <div>
  <div class="handle-box">
    <el-input placeholder="请输入你要查询病人的ID" v-model="searchWord" style="width: 200px"></el-input>
    <el-button type="primary" @click="searchfor()">查询信息</el-button>
  </div>
  <el-row :gutter="20">
    <el-col :span="12">
      <h3>体温</h3>
      <el-card class="cav-info" shadow="hover" :body-style="{ padding: '0px' }" id="tempter"></el-card>
    </el-col>
    <el-col :span="12">
      <h3>心率</h3>
      <el-card class="cav-info" shadow="hover" :body-style="{ padding: '0px' }" id="rate"></el-card>
    </el-col>
  </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <h3>血压</h3>
        <el-card class="cav-info" shadow="hover" :body-style="{ padding: '0px' }" id="press"></el-card>
      </el-col>
      <el-col :span="12">
        <h3>血糖</h3>
        <el-card class="cav-info" shadow="hover" :body-style="{ padding: '0px' }" id="bsugar"></el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "physis",
  data(){
    return{
      searchWord:'',
      //temper的数据
      category : [
        "5.29",
        "5.30",
        "6.1",
        "6.2",
        "6.3",
        "6.4",
        "6.5",
      ],
      barData:[36, 34, 36, 40, 38, 34, 35],
      //rate的数据
      category2 : [
        '5.29',
        "5.30",
        "6.1",
        "6.2",
        "6.3",
        "6.4",
        "6.5",
      ],
      barData2:[80, 74, 86, 96, 69, 68, 77],
      //press的数据
      category3 : [
        "5.29",
        "5.30",
        "6.1",
        "6.2",
        "6.3",
        "6.4",
        "6.5",
      ],
      barData3:[90, 130, 160, 140, 130, 120,124],
      //bsugar的数据
      category4 : [
        "5.29",
        "5.30",
        "6.1",
        "6.2",
        "6.3",
        "6.4",
        "6.5",
      ],
      barData4:[3.5, 2.4,4.6, 6.8, 7.0, 2.5,4.3],
      patient:{
        patientId: " ",
        patientName: "",
        patientSex: "",
        patientAge: '',
        patientInTime: "",
        patientWhy: "",
        bed: null,
        physiologist:[
          {
            patientID: "",
            date: "",
            temperature: '',
            heartRate: '',
            bloodPressure: '',
            bloodSugar: ''
          },
        ],
      },
    }
  },
  created() {
    this.searchWord=this.$route.query.id;
    axios.get('http://localhost:8080/physiology/queryPhysiologyByID',{params:{ID:this.searchWord}}).then(res=>{
      this.category=this.category2=this.category3=this.category4=res.data.category;
for(let i=0;i<7;i++){
  this.barData[i]=res.data.patient.physiologist[i].temperature;
  this.barData2[i]=res.data.patient.physiologist[i].heartRate;
  this.barData3[i]=res.data.patient.physiologist[i].bloodPressure;
  this.barData4[i]=res.data.patient.physiologist[i].bloodSugar;
}
      console.log(this.category2);
console.log(this.barData);
      this.initEcharts1();
      this.initEcharts2();
      this.initEcharts3();
      this.initEcharts4();
    });
  },
  mounted() {
    this.initEcharts1();
    this.initEcharts2();
    this.initEcharts3();
    this.initEcharts4();
  },
  methods:{
    searchfor(){
      axios.get('http://localhost:8080/physiology/queryPhysiologyByID',{params:{ID:this.searchWord}}).then(res=>{
        this.category=this.category2=this.category3=this.category4=res.data.category;
        for(let i=0;i<7;i++){
          this.barData[i]=res.data.patient.physiologist[i].temperature;
          this.barData2[i]=res.data.patient.physiologist[i].heartRate;
          this.barData3[i]=res.data.patient.physiologist[i].bloodPressure;
          this.barData4[i]=res.data.patient.physiologist[i].bloodSugar;
        }
        this.initEcharts1();
        this.initEcharts2();
        this.initEcharts3();
        this.initEcharts4();
      });
    },
    initEcharts1() {
      const  option={
        title:{
          text:'近一周体温变化',
        },
        legend: {
          data: [ '正常体温', '病人体温']
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: this.category,
        },
        yAxis: {
          type: "value",
          min:30
        },
        series: [
          {
            name: "正常体温",
            type: "line",
            data: [34,34,34, 34, 34, 34, 34],
          },
          {
            name: "病人体温",
            type: "line",
            data: this.barData,
          },
          {
            name: "正常体温",
            type: "line",
            data: [37,37,37, 37, 37, 37, 37],
          },
        ],
      };
      const myChart = echarts.init(document.getElementById("tempter"));
      option&&myChart.setOption(option);
    },
    initEcharts2() {
      const  option={
        title:{
          text:'近一周心率变化',
        },
        legend: {
          data: [ '正常心率', '病人心率']
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: this.category2,
        },
        yAxis: {
          type: "value",
          min:50
        },
        series: [
          {
            name: "正常心率",
            type: "line",
            data: [60,60,60,60,60,60,60],
          },
          {
            name: "病人心率",
            type: "line",
            data: this.barData2,
          },
          {
            name: "正常心率",
            type: "line",
            data: [100,100,100,100,100,100,100],
          },
        ],
      };
      const myChart = echarts.init(document.getElementById("rate"));
      option&&myChart.setOption(option);
    },
    initEcharts3() {
      const  option={
        title:{
          text:'近一周血压变化',
        },
        legend: {
          data: [ '正常血压', '病人血压']
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: this.category3,
        },
        yAxis: {
          type: "value",
          min:50
        },
        series: [
          {
            name: "正常血压",
            type: "line",
            data: [60,60,60,60,60,60,60],
          },
          {
            name: "病人血压",
            type: "line",
            data: this.barData3,
          },
          {
            name: "正常血压",
            type: "line",
            data: [139,139,139,139,139,139,139],
          },
        ],
      };
      const myChart = echarts.init(document.getElementById("press"));
      option&&myChart.setOption(option);
    },
    initEcharts4() {
      const  option={
        title:{
          text:'近一周血糖变化',
        },
        legend: {
          data: [ '正常血糖', '病人血糖']
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: this.category4,
        },
        yAxis: {
          type: "value",
          min:0
        },
        series: [
          {
            name: "正常血糖",
            type: "line",
            data: [3.9,3.9,3.9,3.9,3.9,3.9,3.9],
          },
          {
            name: "病人血糖",
            type: "line",
            data: this.barData4,
          },
          {
            name: "正常血糖",
            type: "line",
            data: [7.0,7.0,7.0,7.0,7.0,7.0,7.0],
          },
        ],
      };
      const myChart = echarts.init(document.getElementById("bsugar"));
      option&&myChart.setOption(option);
    },
  }
}

</script>

<style scoped>
.cav-info {
  border-radius: 6px;
  overflow: hidden;
  height: 270px;
  background-color: #ffffff;
  box-shadow: 10px 0px 8px 2px rgba(0, 0, 0, 0.3);
}
</style>
